import React, { useEffect } from 'react';
//访客数与订单量趋势图
import * as echarts from 'echarts';
import '../sacc/fold_line.scss'
const Fold_line = () => {
    useEffect(() => {
        var option = echarts.init(document.getElementById('hha') || document.body);
        option.setOption({
            title: {
                text: '访客数与订单量趋势图'
            },
            legend: {
                data: ['Email', 'Union Ads']
            },
            grid: {
                left: '3%',
                right: '4%',
                bottom: '3%',
                containLabel: true
            },
            xAxis: [
                {
                    type: 'category',
                    boundaryGap: false,
                    data: ['00:00', '1:00', '2:00', '3:00', '4:00', '5:00', '6:00', '7:00', '8:00', '9:00', '10:00', '11:00', '12:00', '13:00', '14:00', '15:00', '16:00', '17:00', '18:00', '19:00', '20:00', '21:00', '22:00', '23:00']
                }
            ],
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                    type: 'cross',
                    label: {
                        backgroundColor: '#6a7985'
                    }
                }
            },
            toolbox: {
                feature: {
                    saveAsImage: {}
                }
            },
            yAxis: [
                {
                    type: 'value',
                    max: 500,
                    min: 0
                }
            ],
            series: [

                {
                    name: 'Email',
                    type: 'line',
                    symbol: "none",
                    areaStyle: {
                        normal: {
                            color: '#3aa1ff'
                        }
                    },
                    data: [90, 30, 10, 5, 8, 70, 100, 140, 250, 470, 340, 310, 240, 200, 180, 230, 260, 240, 180, 230, 110, 200, 100, 70]
                },
                {
                    name: 'Union Ads',
                    type: 'line',
                    symbol: "none",
                    areaStyle: {},
                    data: [10, 20, 9, 1, 0, 30, 40, 55, 130, 202, 170, 172, 130, 100, 85, 100, 120, 120, 80, 105, 50, 90, 45, 30]
                },
            ]
        })
    }, [])
    return (
        <div >

            <div id='hha'>
            </div>
        </div >
    );
};

export default Fold_line;

